import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { cardDefaultProps } from './defaultProps';
import type { CardOptions } from './type';
import CardContent from './CardContent';
import CardHeader from './CardHeader';
import CardMeta from './CardMeta';
import CardDescription from './CardDescription';
import CardGroup from './CardGroup';

export interface CardProps extends CardOptions, Omit<HTMLAttributes<HTMLDivElement>, 'color'> {}

interface CardInterface extends FC<CardProps> {
  Content: typeof CardContent;
  Header: typeof CardHeader;
  Meta: typeof CardMeta;
  Description: typeof CardDescription;
  Group: typeof CardGroup;
}

const Card: CardInterface = (props) => {
  const {
    className,
    as,
    disabled,
    loading,
    fluid,
    centered,
    horizontal,
    raised,
    link,
    inverted,
    color,
    basic,
    children,
    forwardedRef,
    ...cardProps
  } = props;

  return createElement(
    as!,
    {
      ref: forwardedRef,
      className: classNames(
        'ui',
        color,
        { disabled, fluid, centered, horizontal, raised, link, inverted, basic },
        loading,
        { loading },
        'card',
        className,
      ),
      ...cardProps,
    },
    children,
  );
};

Card.displayName = 'Card';
Card.defaultProps = cardDefaultProps;

Card.Content = CardContent;
Card.Header = CardHeader;
Card.Meta = CardMeta;
Card.Description = CardDescription;
Card.Group = CardGroup;

export default Card;
